<template>
  <el-dialog title="库存信息" width="86vw" :modelValue="modelValue" @close="handleClose" draggable align-center :close-on-click-modal="false">
    <div>
      <div class="flex">
        <VText v-for="item in infoColumns" :key="item.value" :title="item.label" :value="info?.[item.field]" line="1" class="w-[200px]" />
      </div>
      <vxe-grid v-bind="orderOptions" />
      <div>
        <div class="my-[8px]">{{ tableTitle[tableType] }}</div>
        <vxe-grid v-bind="tableOptions" ref="tableRef" />
      </div>
    </div>
    <template #footer>
      <el-button type="primary" @click="handleClose"> 确认 </el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="jsx">
import { computed, nextTick, watch } from "vue"

import { stockUpOrderDetail } from "@/api/plan"

const props = defineProps({})
const modelValue = ref(false)
const emit = defineEmits(["refresh", "close"])
const info = ref({})
const infoColumns = [
  { label: "货主", field: "operator_user_text" },
  { label: "国家", field: "site_code" },
]
const tableTitle = {
  1: "FBA可用",
  2: "本地仓可用",
  3: "本地仓待发",
  4: "海外仓可用",
  5: "采购在途",
  6: "FBA在途",
  7: "海外中转在途",
}
const orderTableData = ref([])
const orderOptions = reactive({
  border: true,
  loading: false,
  columnConfig: {
    resizable: true,
  },
  columns: [
    { field: "site_code", title: "国家", width: "80" },
    { field: "sku", title: "SKU" },
    { field: "custom_sku", title: "自定义SKU" },
    { field: "asin", title: "ASIN" },
    {
      field: "plan_asin_inventory.fba_available",
      title: "FBA可用",
      slots: {
        default: ({ row }) => (
          <div class="flex items-center text-[#3487ff] cursor-pointer" onClick={() => onTableType("1")}>
            {row?.plan_asin_inventory?.fba_available}
            <svg-icon icon-class="search" class="text-[#3487ff] ml-[6px]" />
          </div>
        ),
      },
    },

    {
      field: "plan_asin_inventory.local_warehouse_available",
      title: "本地仓可用",
      slots: {
        default: ({ row }) => (
          <div class="flex items-center text-[#3487ff] cursor-pointer" onClick={() => onTableType("2")}>
            {row?.plan_asin_inventory?.local_warehouse_available}
            <svg-icon icon-class="search" class="text-[#3487ff] ml-[6px]" />
          </div>
        ),
      },
    },
    {
      field: "plan_asin_inventory.local_warehouse_pending_shipment",
      title: "本地仓待发",
      slots: {
        default: ({ row }) => (
          <div class="flex items-center text-[#3487ff] cursor-pointer" onClick={() => onTableType("3")}>
            {row?.plan_asin_inventory?.local_warehouse_pending_shipment}
            <svg-icon icon-class="search" class="text-[#3487ff] ml-[6px]" />
          </div>
        ),
      },
    },

    {
      field: "plan_asin_inventory.overseas_warehouse_available",
      title: "海外仓可用",
      slots: {
        default: ({ row }) => (
          <div class="flex items-center text-[#3487ff] cursor-pointer" onClick={() => onTableType("4")}>
            {row?.plan_asin_inventory?.overseas_warehouse_available}
            <svg-icon icon-class="search" class="text-[#3487ff] ml-[6px]" />
          </div>
        ),
      },
    },
    {
      field: "plan_asin_inventory.procurement_in_transit",
      title: "采购在途",
      slots: {
        default: ({ row }) => (
          <div class="flex items-center text-[#3487ff] cursor-pointer" onClick={() => onTableType("5")}>
            {row?.plan_asin_inventory?.procurement_in_transit}
            <svg-icon icon-class="search" class="text-[#3487ff] ml-[6px]" />
          </div>
        ),
      },
    },
    {
      field: "plan_asin_inventory.fba_in_transit",
      title: "FBA在途",
      slots: {
        default: ({ row }) => (
          <div class="flex items-center text-[#3487ff] cursor-pointer" onClick={() => onTableType("6")}>
            {row?.plan_asin_inventory?.fba_in_transit}
            <svg-icon icon-class="search" class="text-[#3487ff] ml-[6px]" />
          </div>
        ),
      },
    },
    {
      field: "plan_asin_inventory.overseas_transit_in_transit",
      title: "海外中转在途",
      width: "120",
      slots: {
        default: ({ row }) => (
          <div class="flex items-center text-[#3487ff]" onClick={() => onTableType("7")}>
            {row?.plan_asin_inventory?.overseas_transit_in_transit || 0}
            <svg-icon icon-class="search" class="text-[#3487ff] ml-[6px]" />
          </div>
        ),
      },
    },
  ],
  data: [],
})
const getOrderInfo = async (row) => {
  orderOptions.loading = true
  setTimeout(() => {
    orderOptions.data = [row]
    info.value = row
    orderOptions.loading = false
    onTableType("1")
  }, 1000)
}

const columns = {
  1: [
    { field: "warehouse_name", title: "仓库名称" },
    { field: "sku", title: "SKU" },
    { field: "custom_sku", title: "自定义SKU" },
    { field: "asin", title: "ASIN" },
    { field: "seller_sku", title: "渠道SKU" },
    { field: "num", title: "可用库存" },
  ],
  2: [
    { field: "wms_attribute", title: "仓库类型" },
    { field: "warehouse_name", title: "仓库名称" },
    { field: "sku", title: "SKU" },
    { field: "custom_sku", title: "自定义SKU" },
    { field: "transit_num", title: "待入库" },
    { field: "num", title: "可用库存" },
    { field: "lock_num", title: "已锁定" },
  ],
  3: [
    { field: "order_type", title: "类型" },
    { field: "order_no", title: "单据" },
    { field: "sku", title: "SKU" },
    { field: "custom_sku", title: "自定义SKU" },
    { field: "warehouse_name", title: "发货仓库" },
    { field: "real_lock_quantity", title: "出库数量" },
    { field: "goods_time", title: "配货时间" },
  ],
  4: [
    { field: "wms_attribute", title: "仓库类型" },
    { field: "warehouse_name", title: "仓库名称" },
    { field: "sku", title: "SKU" },
    { field: "custom_sku", title: "自定义SKU" },
    { field: "transit_num", title: "待入库" },
    { field: "num", title: "可用库存" },
    { field: "lock_num", title: "已锁定" },
  ],
  5: [
    { field: "order_no", title: "采购单号" },
    { field: "order_status", title: "状态" },
    { field: "sku", title: "SKU" },
    { field: "custom_sku", title: "自定义SKU" },
    { field: "supplier_id", title: "供应商" },
    { field: "warehouse_name", title: "收货仓库" },
    { field: "real_transit_quantity", title: "采购数量" },
    { field: "order_create_time", title: "下单时间" },
    { field: "estimated_arrival_time", title: "预计到货时间" },
  ],
  6: [
    { field: "order_no", title: "备货单号" },
    { field: "order_status", title: "状态" },
    { field: "sku", title: "SKU" },
    { field: "custom_sku", title: "自定义SKU" },
    { field: "warehouse_name", title: "发货仓库" },
    { field: "name", title: "收货仓库 x" },
    { field: "shipping_id", title: "运输方式" },
    { field: "get_quantity", title: "剩余收货数量" },
    { field: "outstock_join_time", title: "发货时间" },
    { field: "estimated_arrival_time", title: "预计到货时间" },
  ],
  7: [
    { field: "order_no", title: "备货单号" },
    { field: "order_status", title: "状态" },
    { field: "sku", title: "SKU" },
    { field: "custom_sku", title: "自定义SKU" },
    { field: "warehouse_name", title: "发货仓库" },
    { field: "name", title: "收货仓库" },
    { field: "shipping_id", title: "运输方式" },
    { field: "get_quantity", title: "剩余收货数量" },
    { field: "outstock_join_time", title: "发货时间" },
    { field: "estimated_arrival_time", title: "预计到货时间" },
  ],
}

const tableRef = ref()
const tableType = ref("1")

const onTableType = async (e) => {
  tableType.value = e
  tableOptions.loading = true
  try {
    let form = orderOptions?.data?.[0]
    let params = {
      type: e,
      country: form.site_code,
      asin: form.asin,
      sku: form.sku,
      owner_id: form.operator_user,
    }
    // 本地仓可用
    if (e == 2) {
      params.warehouse_id = [2, 5, 7] // 写死
      delete params.asin
      delete params.country
    }

    // 本地仓待发
    if (e == 3) {
      params.warehouse_id = [2, 5, 7] // 写死
      delete params.asin
      delete params.country
    }

    // 采购在途
    if (e == 5) {
      delete params.asin
      delete params.country
    }

    // FBA在途
    if (e == 6) {
      params.shop_id = form.store_id
    }

    if ("4,7".includes(e)) {
      delete params.asin
    }

    let res = await stockUpOrderDetail(params)
    tableRef?.value?.loadColumn(columns?.[e])
    tableOptions.data = res.data
    tableOptions.loading = false
  } catch (error) {
    tableOptions.loading = false
  }
}

const tableOptions = reactive({
  border: true,
  height: 300,
  columnConfig: { resizable: true },
  loading: false,
  columns: [],
  data: [],
})

const handleClose = () => {
  modelValue.value = false
  orderOptions.data = []
}
const open = (row) => {
  modelValue.value = true
  getOrderInfo(row)
}

defineExpose({
  open,
})
</script>
<style lang="scss" scoped></style>
